<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>项目详情</title>
    <link rel="stylesheet" type="text/css" href="style/main.css">
    <link rel="stylesheet" href="style/chosen.css">
    <link rel="stylesheet" href="style/jquery-labelauty.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/input.js"></script>
	<script type="text/javascript" src="js/rem.js"></script>
</head>
<body>
<div class="index_header">
    <div class="center">
        <div class="logo"><a href="javascript:">培育计划申报</a></div>
        <div class="state">
                <span>
                    <a href="javascript:">
                        <img src="images/portrait.jpg">李华
                    </a>
                    <ul>
                        <li><a href="javascript:">个人信息</a></li>
                        <li><a href="javascript:">我的消息</a></li>
                        <li><a href="javascript:">修改密码</a></li>
                        <li><a href="javascript:">清除缓存</a></li>
                    </ul>
                </span>
            <span><a  href="javascript:">退出</a></span>
        </div>
    </div>
</div>
<div class="pro_detail">
    <div class="project">
        <div class="center">
            <p>大学生自主研发3D网络超市</p>
            <div class="address">
                <span>广东省</span>茂名市
            </div>
            <div class="field">
                <span>科学技术服务类</span>
                <span>创业计划</span>
            </div>
        </div>
    </div>
    <ul class="menu" id="menu">
        <div class="center">
            <li class="curr"><a href="#project_info">项目信息</a></li>
            <li><a href="#team">团队信息</a></li>
            <li><a href="#result">审核信息</a></li>
        </div>
    </ul>
    <div class="menu_detail">
        <div class="center">
            <div class="project_info" id="project_info">
                <div class="title">
                    <img src="images/project1.png">项目信息
                </div>
                <ul>
                    <li>
                        <div>项目概述</div>
                        <p>
                            目前，国内快递在运输物品时，往往会出现贵重物品破损的现象。
                            传统设备无法记录贵重物品在运输过程中的震动，磁场，温度等环境信息，
                            因此无法判断物品本身存在质量问题还是运输过程中的不合格操作造成物品损坏。
                            货运双方经常为此产生纠纷。
                        </p>
                        <p>
                            本产品与特种货物外装箱绑定，通过内置传感器实时记录特种货物加速度等状态信息，
                            用以监测运输过程中是否出现撞击，掉落等异常现象，异常信息将被记录在系统的存储器中，
                            本产品提供蓝牙拓展接口支持与物流公司提供的终端连接，将物流信息直接上传网络，
                            方便用户实时获取。
                        </p>
                    </li>     
                    <li>
                        <div>项目进展</div>
                    </li>
                    <li>
                        <div>项目附件</div>
                        <div class="file">
                            <img src="images/report.png">
                            <span>项目计划书</span>
                            <a href="javascript:" download="">下载</a>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="team" id="team">
                <div class="title">
                    <img src="images/team.png">团队信息
                </div>
                <ul>
                    <li>
                        <div>团队成员</div>
                        <table>
                            <tr>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>团队角色</th>
                                <th>学院</th>
                                <th>专业</th>
                                <th>工作</th>
                            </tr>
                            <tr>
                                <td>许蔚佳</td>
                                <td>男</td>
                                <td>项目创始人</td>
                                <td>电信学院</td>
                                <td>自动化15</td>
                                <td>项目工作的安排及进度的监督</td>
                            </tr>
                            <tr>
                                <td>张鹏飞</td>
                                <td>男</td>
                                <td>团队成员</td>
                                <td>电信学院</td>
                                <td>自动化15</td>
                                <td>硬件、软件的研发、调试</td>
                            </tr>
                            <tr>
                                <td>庄钊鑫</td>
                                <td>男</td>
                                <td>团队成员</td>
                                <td>电信学院</td>
                                <td>电信15</td>
                                <td>软件的研发和宣传</td>
                            </tr>
                        </table>
                    </li>
                    <li>
                        <div>指导老师</div>
                    </li>
                </ul>
            </div>
            <div class="result" id="result">
                <div class="title">
                    <img src="images/result.png">审核信息
                </div>
                <ul>
                	<li>
                    	<div>推荐给</div>
                    	<div class="sel">
                    		<select data-placeholder="请选择所属于领域" class="chosen-select" multiple tabindex="4">
		                        <option value=""></option>
		                        <option value="1">张鹏飞</option>
		                        <option value="1">张鹏飞</option>
		                        <option value="1">张鹏飞</option>
		                        <option value="1">张鹏飞</option>
		                        <option value="1">张鹏飞</option>
		                    </select>
                    	</div>
                    </li>
                    <li>
                    	<div>审核建议</div>
                    	<ul class="dowebok">
                    		<li><input type="radio" name="examine" data-labelauty="暂不审核"></li>
							<li><input type="radio" name="examine" data-labelauty="审核通过"></li>
							<li><input type="radio" name="examine" data-labelauty="审核不通过"></li>
						</ul>
                        <div class="examine">
                            <textarea placeholder="内容选填，可给予项目建议或者项目审核不通过的理由" id="txt"></textarea>
                            <div class="limit"><span id="word">150</span>/150</div>
                        </div>
                        <button>确定</button>
                    </li> 
                </ul>
            </div>

        </div>
    </div>
</div>
<div class="footer">
    <div class="link">
        <a>友情链接：</a>
        <a href="javascript:">学院概况</a><span></span>
        <a href="javascript:">政策法规</a><span></span>
        <a href="javascript:">服务平台</a><span></span>
        <a href="javascript:">下载专区</a><span></span>
        <a href="javascript:">联系我们</a><span></span>
        <a href="javascript:">后台管理</a>
    </div>
    <div class="msg">
        <p>地址：广东省茂名市茂南区官渡二路139号广东石油化工学院</p>
        <p>联系电话：13900000 <span>邮箱：12455@163.com</span></p>
    </div>
    <span>©2017  广东石油化工学院创新创业学院  版权所有</span>
</div>
<script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="js/chosen.jquery.js" type="text/javascript"></script>
<script src="js/prism.js" type="text/javascript" charset="utf-8"></script>
<script src="js/init.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-labelauty.js"></script>
<script>
    $(function () {
        var  menu_top = $("#menu").offset().top; 
        var  team_top = $("#team").offset().top;
        var  result_top = $("#result").offset().top;
        $(window).scroll(function(){
            var scroH = $(this).scrollTop();
            if(scroH>=menu_top){
                $(".menu").css({"position":"fixed","top":0});
            }else if(scroH<menu_top){
                $(".menu").css({"position":"static"});
            }    
        })

        $(".menu li").click(function(){
           $(this).addClass("curr").siblings().removeClass("curr"); 
        });
        $(':input').labelauty();

        $("textarea").focus(function(){
            $(this).css("box-shadow","0 0 5px rgba(0, 0, 0, 0.3)");
        });
        $("textarea").blur(function(){
            $(this).css("box-shadow","none");
        });

        $("#txt").keyup(function(){  
            if($("#txt").val().length > 150){
                $("#txt").val( $("#txt").val().substring(0,150) );
            }
            $("#word").text( 150 - $("#txt").val().length ) ;
        });
    })
</script>
</body>
</html>